<template>
	<view>
		<view style="display: flex;margin: 50rpx auto 100rpx auto;align-items: center;justify-content: center; ">
			<image style="display: flex;width: 60rpx;height: 60rpx;" src="../../static/quankelogo.png" mode=""></image>
			<text style="color: red;font-size: 40rpx;margin-left: 20rpx;">礼品兑换中心</text>
		</view>
		<radio-group style="display: flex;justify-content: space-between;width: 80%;margin: 50rpx auto 100rpx auto;"
			@change="radioChange">
			<label style="display: flex;align-items: center;" v-for="(item, index) in items" :key="item.value">
				<view>
					<radio :value="item.value" :checked="index === current" />
				</view>
				<view>{{item.name}}</view>
			</label>
		</radio-group>
		<view v-if="current==0" style="display: flex;align-items: center;justify-content: center;margin-top: 50rpx;">
			<view style="color: red;">
				卡号：
			</view>
			<input
				style="display: flex;width:420rpx; padding: 15rpx 25rpx;font-size: 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;"
				type="text" v-model="kahao" placeholder="请输入卡号" />
		</view>
		<view v-if="current==1" style="display: flex;align-items: center;justify-content: center;margin-top: 50rpx;">
			<view style="color: red;">
				卡号：
			</view>
			<textarea v-model="kahao_duo" @input="aaaa" placeholder="请输入多个卡号 以 , 或空格隔开"
				style="width: 420rpx; font-size: 25rpx;padding: 15rpx 25rpx; height:180rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;"
				maxlength="-1"></textarea>

		</view>
		<view v-if="current==2" style="display: flex;align-items: center;justify-content: center;">
			<view style="color: red;">
				起始卡号：
			</view>
			<input
				style="display: flex;width:420rpx; padding: 15rpx 25rpx;font-size: 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;"
				type="text" v-model="kahao_start" placeholder="请输入起始卡号" />
		</view>
		<view v-if="current==2" style="display: flex;align-items: center;margin-top:50rpx;justify-content: center;">
			<view style="color: red;">
				终止卡号：
			</view>
			<input
				style="display: flex;width: 420rpx; padding: 15rpx 25rpx;font-size: 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;"
				type="text" v-model="kahao_end" placeholder="请输入终止卡号" />
		</view>
		<view @click="kahaochaxun"
			style="display: flex;width: 70%;height:80rpx;justify-content: center;align-items: center; margin: 150rpx auto 20rpx auto;background-color: orangered;border-radius: 15rpx;color: white;">
			立 即 查 询
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kahao_duo: '',
				kahao_start: '',
				kahao_end: '',
				kahao: '',
				current: 0,
				items: [{
						value: 'dan',
						name: '单个查询',
						checked: 'true'
					},
					{
						value: 'duo',
						name: '多个查询'
					},
					{
						value: 'qujian',
						name: '区间查询'
					}
				]
			}
		},
		methods: {
			aaaa(e) {
				this.kahao_duo = e.detail.value;
			},
			kahaochaxun() {
				console.log(this.kahao_duo);
				if (this.current == 0) {
					if (!this.kahao) {
						return uni.showToast({
							title: "请输入卡号",
							icon: "loading"
						})
					}
					uni.navigateTo({
						url: '/pages/kazhuangtai/kazhuangtai_list?current=' + this.current + '&kahao=' + this.kahao
					})
				} else if (this.current == 1) {
					if (!this.kahao_duo) {
						return uni.showToast({
							title: "请输入卡号",
							icon: "loading"
						})
					}
					uni.navigateTo({
						url: '/pages/kazhuangtai/kazhuangtai_list?current=' + this.current + '&kahao_duo=' + this
							.kahao_duo
					})
				} else {
					if (!this.kahao_start || !this.kahao_end) {
						return uni.showToast({
							title: "请输入卡号",
							icon: "loading"
						})
					}
					uni.navigateTo({
						url: '/pages/kazhuangtai/kazhuangtai_list?current=' + this.current + '&kahao_start=' + this
							.kahao_start + '&kahao_end=' + this.kahao_end
					})
				}
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						console.log(this.current);
						break;
					}
				}
			}
		}
	}
</script>

<style>

</style>